import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { todoClearDoned } from '../../store/actions/todo'
import classNames from 'classnames'
import { filterActiveAsync } from '../../store/actions/filter'

export default function TodoFooter() {
  const dispatch = useDispatch()
  const lists = useSelector(state => state.todo)
  const { arr, active } = useSelector(state => state.filter)
  const filterList = lists.filter(item => !item.done)
  const isShow = lists.some(item => item.done)
  function handleClearDoned() {
    dispatch(todoClearDoned())
  }

  function handleActive(data) {
    dispatch(filterActiveAsync(data))
  }

  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{filterList.length}</strong> item left
      </span>
      <ul className="filters">
        {arr.map(item => {
          return (
            <li key={item} onClick={() => handleActive(item)}>
              <a className={classNames({ selected: item === active })} href="#/">
                {item}
              </a>
            </li>
          )
        })}
      </ul>
      {
        isShow && <button className="clear-completed" onClick={handleClearDoned}>Clear completed</button>
      }
    </footer>
  )
}
